<template>
  <div>
    <button @click="startScanning">Start Scanning</button>
    <ul>
      <li v-for="device in devices" :key="device.id">
        {{ device.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import noble from 'noble';

export default {
  data() {
    return {
      devices: []
    };
  },
  methods: {
    startScanning() {
      noble.on('stateChange', (state) => {
        if (state === 'poweredOn') {
          noble.startScanning();
        } else {
          noble.stopScanning();
        }
      });

      noble.on('discover', (peripheral) => {
        if (peripheral.advertisement.localName) {
          this.devices.push(peripheral);
        }
      });
    }
  }
}
</script>
